<script>
import Hello from './hello.vue'

export default {
    data() {
        return {
            msg: "这是Content父组件传来的数据",
            list: [1, 2, 3, 4]
        }
    },
    components: {
        Hello
    },
    methods: {
        changeList() {
            this.msg = "被改变的msg"
        },
        sendToApp() {  // 1、通过$emit触发事件
            // this.$emit('自定义事件名称', '发送的事件参数')
            this.$emit("injectMsg", this.msg)
        }
    },
    mounted() {
        // console.log(this.$refs);
    }
}

</script>

<template>
    <!-- 将对象传递给子组件，这里用的是v-bind -->

    <!-- 父子组件之间传值 -->
    <!-- 
        1、父组件访问子组件：$refs 
        ref可以用在子组件标签，也可以用在html标签上
    -->
    <!-- 
        2、子组件访问父组件：$parent 
        子组件可以通过this.$parent获取父组件对象，
        但是由于组件复用性不推荐这样操作，建议使用Props只传递需要的参数
    -->
    <!-- 
        3、子组件访问根组件：$root

    -->
    <!--  -->
    <Hello :message="msg" :list="list" ref="hello" />
    <p ref="p"></p>
    <div>
        <h2>我是Content组件</h2>
        <h4>{{msg}}</h4>
        <button @click="changeList">改变msg</button>
    </div>
    <div>
        <button @click="sendToApp">提交msg数据给父组件</button>
    </div>
</template>

<style>

</style>